<template>
	<view>
		<text class="secret-info" v-if="transform !='translateY(0)'">网忆新闻</text>
		<view class="welcome-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
		:style="welcomeStyle">
			<image src="../../static/icons/icon.png" class="ic-welcome"></image>
			<text class="welcome">WELCOME!</text>
			<text class="sub-welcome">欢迎加入网忆News</text>
			<view class="upload-container" @tap="tapToChoose">
				<image :src="avatar" mode="aspectFill" class="user-avatar"></image>
			    <text class="input-holder">{{avatarUrl}}</text>
			</view>
			<input type="text"class="input-input" placeholder-class="input-holder" placeholder="请输入昵称" id="nick"
			  @input="inputChange"/>
			<input type="text"class="input-input" placeholder-class="input-holder" placeholder="请输入邮箱" id="email"
			  @input="inputChange"/>
			<input type="text"class="input-input" placeholder-class="input-holder" placeholder="请输入用户名" id="user"
			  @input="inputChange"/>
			  <view class="pwd-container input-input">
				  <input v-if="isPwd" type="password" class="input-pwd" placeholder-class="input-holder" placeholder="请输入密码" id="password"
				  @input="inputChange"/>
				  <input v-else type="text" class="input-pwd" placeholder-class="input-holder" placeholder="请输入密码" id="password"
				  @input="inputChange"/>
				  <text :class="isPwd?'iconfont icon-chakan ic-pwd':'iconfont icon-htmal5icon08 ic-pwd'"@click="clickSwitchPwd"></text>
			  </view>
			  <text class="btn-register input-input"@click="clickRegister">注册</text>
		</view>
	</view>
</template>

<script>
	let startY = 0
	let pic = ''
	export default { 
		data() {
			return {
				transform: 'translateY(0)',
				transition:'',
				avatar:"../../static/icons/default_user.png",
				avatarUrl:"请选择图片上传",
				isPwd:true,
				nick:"",
				email:"",
				user:"",
				password:""
			}
		},
		onLoad(){
			uni.setNavigationBarTitle({
				title:"注册用户"
			})
		},
		computed:{
			welcomeStyle:function(){
				return{
					'transform':this.transform,
					'transition':this.transition
				}
			}
		},
		methods: {
			touchStart(e){//记录一开始触摸点的纵坐标
				startY = e.touches[0].clientY
			},
			touchMove(e){
				let distance = e.touches[0].clientY - startY
				if(distance >= 150){
					distance = 150
				}
				if(distance < 0){
					return
				}
				this.transform = `translateY(${distance}rex)`
			},
			touchEnd(e){
				this.transform = 'translateY(0)'
				this.transition = 'transition 500ms linear'
			},
			tapToChoose(){
				let url = this.$params.host + this.$params.action_upload
				uni.chooseImage({
					count:1,
					success:res=>{
						console.log(res);
						let path = res.tempFilePaths[0]
						this.$request.postFile(url,'file',path,{},res=>{
							let json = JSON.parse(res.data)
							pic = json.data
							this.avatarUrl = pic
							this.avatar = this.$params.host + pic
						})
					}
				})
			},
			clickSwitchPwd(){
				this.isPwd = !this.isPwd
			},
			inputChange(e){
				// console.log(e);
				let prop = e.target.id
				this[`${prop}`] = e.detail.value
			},
			clickRegister(){
				if(!this.checkValid()){
					return
				}
				//注册提交
				let data= {
					nick_name:this.nick,
					user_name:this.user,
					avatar:pic,
					password:this.password,
					email:this.email
				}
				let url = this.$params.host + this.$params.action_register
				this.$request.post(url,data,res =>{
					if(!res.success){
						uni.showToast({
							title:res.message,
							icon:'none'
						});
						return 
					}
					const app = getApp()
					app.globalData.uid = res.data.id
					app.globalData.userName = res.data.userName
					app.globalData.nickName = res.data.nickName
					app.globalData.token = res.data.token
					app.globalData.avatar = res.data.avatar
					app.globalData.email = res.data.email
					app.globalData.type = res.data.type
					this.$noti.post(this.$params.noti_login_status)
					nui.navigateBack()
				})
			},
			checkValid(){
				if(!this.$utils.checkLength(this.nick,2,"用户姓名")){
					return false
				}
				if(!this.$utils.checkLength(this.user,4,"用户名")){
					return false
				}
				if(!this.$utils.checkLength(this.password,6,"密码")){
					return false
				}
				let regex = /^[a-zA-Z0-9\u4e00-\u9fa5_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if(!regex.test(this.email)){
					uni.showToast({
						title:'邮箱格式不正确',
						icon:'none'
					});
					return false
				}
				if(this.avatar == "../../static/icons/default_user.png"){
					uni.showToast({
						title:'请选择图片上传',
						icon:'none'
					});
					return false
				}
				return true
			}
		}
	}
</script>

<style>
    @import url("register.css");
</style>
